import React, {useEffect, useRef, useState} from "react";
import {
    Button,
    Table,
    Space,
    Modal, message,
} from "antd";
import service from "../../../service";
import "./cangku.css";

export default function Cangku() {
    const [data, setDate] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibles, setIsModalVisibles] = useState(false);
    const [item, setItem] = useState({});
    const warehouse_nameRef = useRef(null);
    const phoneRef = useRef(null);
    const noteRef = useRef(null);
    const headRef = useRef(null);
    const showModal = () => {
        setIsModalVisible(true);
    };

    //新增仓库
    const handleOk = () => {
        const warehouse_name = warehouse_nameRef.current.value;
        const note = noteRef.current.value;
        const phone = phoneRef.current.value;
        const head = headRef.current.value;
        service.writeOffService.ADD_WareHouse({warehouse_name, note, phone, head}).then(data => {
            console.log("添加仓库", data);
            if (data.code === 200) {
                message.success(data.msg);
                getWareHouseList();
            } else {
                message.success("添加失败");
            }
            setIsModalVisible(false);
            warehouse_nameRef.current.value = ""
            noteRef.current.value = ""
            phoneRef.current.value = ""
            headRef.current.value = ""
        }).catch(err => {
            console.log("添加仓库出错了", err);
        })

    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //展示编辑弹窗
    const showModals = (record) => {
        console.log(record);
        setIsModalVisibles(true);
        setItem(record)
    };
    //编辑仓库
    const handleOks = () => {
        const obj = {
            ...item,
            warehouse_name: warehouse_nameRef.current.value,
            note: noteRef.current.value,
            phone: phoneRef.current.value,
            head: headRef.current.value
        }
        service.writeOffService.UPDATE_WareHouse(obj).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getWareHouseList();
            } else {
                message.error("编辑失败");
            }
        }).catch(err => {
            console.log("编辑出错啦", err);
        })
        setIsModalVisibles(false);
    };

    const handleCancels = () => {
        setIsModalVisibles(false);
    };
    //获取仓库列表
    const getWareHouseList = () => {
        service.writeOffService.get_WareHouseList().then(data => {
            console.log("仓库列表", data);
            setDate(data.data)
        }).catch(err => {
            console.log("仓库列表请求出错啦", err);
        })
    }
    //删除仓库
    const handleDel = (id) => {
        service.writeOffService.DEL_WareHouse(id).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getWareHouseList();
            } else {
                message.error("删除失败")
            }
        }).catch(err => {
            console.log("删除仓库出错了", err);
        })
    }

    useEffect(() => {
        getWareHouseList();
    }, [])
    const columns = [
        {
            title: "仓库名称",
            dataIndex: "warehouse_name",
            key: "warehouse_name",
        },
        {
            title: "负责人",
            dataIndex: "head",
            key: "head",
        },
        {
            title: "电话",
            dataIndex: "phone",
            key: "phone",
        },
        {
            title: "备注",
            dataIndex: "note",
            key: "note",
        },

        {
            title: "管理",
            render: (_, record) => (
                <Space size="middle">
                    <Button type="primary" size="small" style={{borderRadius: "5px"}} onClick={() => showModals(record)}>修改</Button>
                    <Button type="primary" danger size="small" style={{borderRadius: "5px"}} onClick={() => handleDel(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <div className="ckbutton">
                <Button type="primary" className="sysp">
                    仓库列表
                </Button>
                <Button type="primary" className="xzsp" onClick={showModal}>
                    新增仓库
                </Button>
            </div>
            <Table columns={columns} rowKey={record => record.id} dataSource={data} pagination={false}/>

            <Modal
                title="新增仓库"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <div id="ckmod">
                    <ul>
                        <li style={{display: "flex"}}>
                            <span>仓库名称</span>
                            <span>
                <input type="text" ref={warehouse_nameRef}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>负责人</span>
                            <span>
                <input type="text" ref={headRef}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>电话</span>
                            <span>
                <input type="text" ref={phoneRef}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>备注</span>
                            <span>
                {/* <input type="textarea" /> */}
                                <textarea ref={noteRef}></textarea>
              </span>
                        </li>
                        {" "}
                    </ul>
                </div>
            </Modal>
            <Modal
                title="修改仓库"
                visible={isModalVisibles}
                onOk={handleOks}
                onCancel={handleCancels}
            >
                <div id="ckmod">
                    <ul>
                        <li style={{display: "flex"}}>
                            <span>仓库名称</span>
                            <span>
                <input type="text" ref={warehouse_nameRef} value={item.warehouse_name}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>负责人</span>
                            <span>
                <input type="text" ref={headRef} value={item.head}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>电话</span>
                            <span>
                <input type="text" ref={phoneRef} value={item.phone}/>
              </span>
                        </li>
                        {" "}
                        <li style={{display: "flex"}}>
                            <span>备注</span>
                            <span>
                                <textarea ref={noteRef} value={item.note}></textarea>
              </span>
                        </li>
                        {" "}
                    </ul>
                </div>
            </Modal>
        </div>
    );
}
